<template>
  <div class="hot">
    <div class="title">猜你喜欢</div>
    <div class="gongneng">
      <span>综合排序</span>
      <span @click="zuijin">最近距离</span>
      <span @click="jianxu">销量最高</span>
      <span>筛选</span>
    </div>
    <div class="youhui">
      <span>年货节热卖</span>
      <span>津贴联盟</span>
      <span>优惠满减</span>
      <span>品质联盟</span>
    </div>
    <div class="list">
      <div class="item" v-for="(item,index) in shopList" :key="index">
        <div class="pic">
            <img :src="item.picUrl" alt="">
        </div>
        <div class="info">
          <div class="name">{{item.name}}</div>
          <div class="one">
            <span>{{(item.wmPoiScore/10)}}</span>&nbsp;
            <span>{{item.monthSalesTip}}</span>
          </div>
          <div class="two">
            <span class="peisong">
              <span>{{item.minPriceTip}}</span>&nbsp;
              <span>{{item.shippingFeeTip}}</span>
            </span>
            <span class="shujv">
              <span>{{item.deliveryTimeTip}}</span>&nbsp;
              <span>{{item.distance}}</span>
            </span>
          </div>
          <div class="three" >
            <span v-for="(item,index) in item.discounts2" :key="index">{{item.info}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import  {shop_list} from "../api";
export default {
  data() {
    
    return {
        distance1 :'',
        shopList:[],
    };
  },
  methods: {
    zuijin() {
      this.shopList.sort((a, b) => {
        return parseFloat(a.distance) - parseFloat(b.distance);
      });
    },
    jianxu() {
      this.shopList.sort((a, b) => {
        console.log(parseInt(a.monthSalesTip.substring(2)));
        
        
        return parseInt(b.monthSalesTip.substring(2)) - parseInt(a.monthSalesTip.substring(2));
      });
    },
  },
  mounted() {
    shop_list().then((res)=>{
        this.shopList = res.data.list
        
    })
  },
};
</script>

<style scoped>
.hot {
  padding: 0 20px;
}
.hot .title {
  font-size: 20px;
}
.hot .gongneng {
  margin: 10px 0;
}
.hot .gongneng span {
  margin-right: 35px;
}
.hot .gongneng span:nth-child(4) {
  margin-right: 0;
}
.hot .youhui {
  margin: 20px 0;
}
.hot .youhui span {
  padding: 5px;
  margin-right: 6px;
  background-color: #ccc;
}
.hot .youhui span:nth-child(4) {
  margin-right: 0;
}
.hot .list {
  /* display: flex; */
  height: 300px;
  /* background-color: ; */
  overflow: auto;
}

.hot .list::-webkit-scrollbar {
  display: none;
}
.hot .list .item {
  width: 100%;
  display: flex;
  /* height: 160px; */
  /* background-color: orange; */
  margin: 20px 0;
}
.hot .list .item .pic {
  height: 110px;
  width: 110px;
  /* background-color: pink; */
  /* margin-right: 20px; */
}
.hot .list .item .pic img {
    width: 100%;
}
.hot .list .item .info {
  flex: 1;
  margin-left: 10px;
}

.hot .list .item .one,
.hot .list .item .two,
.hot .list .item .three {
  font-size: 12px;
  margin-bottom: 10px;
}
.hot .list .item .two {
    display: flex;
    justify-content: space-between;
}
.hot .list .item .three {
    margin-bottom: 0;
    line-height: 27px;
}

.hot .list .item .name {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 15px;
}

.hot .list .item .three span {
    padding: 3px;
    border: 1px solid pink;
    margin-right: 3px;
}
</style>